<template>
  <div class="hello">
    <h2>Essential Links</h2>
    <el-tree
      :data="data"
      :props="{ label: 'label' }"
      highlight-current
      default-expand-all
      ref="selectTree"
      :expand-on-click-node="false"
      node-key="id"
    ></el-tree>
    <el-button @click="collapseAll2(data)">全部折叠</el-button>
    <el-button @click="unFoldAll2(data)">全部展开</el-button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
      },
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      count: 1,
      res: [],
    };
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    // 全部展开
    unFoldAll2(data) {
      let self = this;
      data.forEach((el) => {
        self.$refs.selectTree.store.nodesMap[el.id].expanded = true;
        el.children && el.children.length > 0
          ? self.unFoldAll2(el.children)
          : ""; // 子级递归
      });
    },
    // 全部折叠
    collapseAll2(data) {
      let self = this;
      data.forEach((el) => {
        self.$refs.selectTree.store.nodesMap[el.id].expanded = false;
        el.children && el.children.length > 0
          ? self.collapseAll2(el.children)
          : ""; // 子级递归
      });
    },

    // 返回为没有变成树的数据
    fn(source) {
      let self = this;
      source.forEach((el) => {
        self.res.push(el);
        el.children && el.children.length > 0 ? self.fn(el.children) : ""; // 子级递归
      });
    },
    // 全部展开
    unFoldAll() {
      let self = this;
      // 将没有转换成树的原数据
      self.fn(this.data);
      for (let i = 0; i < this.res.length; i++) {
        // 将没有转换成树的原数据设置key为... 的展开
        self.$refs.selectTree.store.nodesMap[self.res[i].id].expanded = true;
      }
    },
    // 全部折叠
    collapseAll() {
      let self = this;
      // 将没有转换成树的原数据
      self.fn(this.data);
      for (let i = 0; i < this.res.length; i++) {
        self.$refs.selectTree.store.nodesMap[self.res[i].id].expanded = false;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
